<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-03-08 13:06:52
-->
<template>
  <div class="Comment_page">
    <div v-if="list.length">
      <div class="comment_item" v-for="item in list" :key="item.commentId">
        <div class="left">
          <van-image
            :src="item.headUrl"
            width="30"
            height="30"
            round
            fit="contain"
          />
        </div>
        <div class="right">
          <div class="header">
            <span class="name"
              >{{ item.commentName }}
              <i class="iconfont icon-VIP1" v-if="item.vipStatus > 0"></i>
            </span>
            <span class="rate">
              <van-rate
                size="12"
                readonly
                color="#ffa500"
                v-model="item.level"
              />
            </span>
          </div>
          <div class="content">
            {{ item.commentContent }}
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no_data">
        <img src="../../../assets/img/nodata.png" alt="" srcset="">
        <p>暂无评论</p>
    </div>
  </div>
</template>



<script>
import { defineComponent, ref } from "vue";
import { queryComment } from "@/api/crouse";
import { useRoute } from "vue-router";
export default defineComponent({
  setup() {
    const route = useRoute();
    const list = ref([]);
    const init = async () => {
      const res = await queryComment({
        courseId: route.query.courseId,
        pageIndex: 1,
        pageSize: 100,
      });
      if (res) {
        list.value = res;
      }
    };
    return {
      list,
      init,
    };
  },
});
</script>



<style lang="scss" scoped>
.Comment_page {
  display: flex;
  flex-direction: column;
  .comment_item {
    margin: 20px;
    display: flex;
    flex-direction: row;
    .left {
      width: 40px;
    }
    .right {
      width: calc(100% - 50px);
      font-size: 12px;
      .header {
        display: flex;
        align-items: center;
        .name {
          font-size: 14px;
          width: 100%;
          color: #706d6d;
          i {
            color: #f56d1f;
            font-size: 16px;
          }
        }
        .rate {
          width: 100%;
          text-align: right;
        }
      }
      .content {
        margin: 10px 0;
        font-size: 14px;
      }
    }
  }
  .no_data{
    padding: 50px;
    text-align: center;
    img{
      width: 100px;
      margin: 0 auto;
    }
    p{
      font-size: 16px;
      color: #999;
    }
  }
}
</style>